<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 600px;
				border: 1px solid #000;
				margin: 100px auto;
				/* overflow: hidden; */
				
				/* 
				在伸缩布局中 默认情况下水平方向是主轴，默认情况下主轴的起点在伸缩容器的
				 最左边,默认情况下所有的伸缩项都是从主轴的起点开始排版的
				 但是我们也可以通过属性来修改主轴的起点位置
				 	flex-direction: row;
					用于修改主轴起点的位置
					row:起点在伸缩容器的最左边 终点在伸缩容器的最右边 从左到右
					
				 */
				display: flex;
				/* flex-direction: row-reverse; */
				/* flex-direction: column; */
		     	/* flex-direction: column-reverse; */
				
				/* 
				 justify-content: flex-start;
				 主轴上伸缩项对齐的默认值
				 flex-end  主轴终点对齐
				 space-between  两端对齐
				 space-around  环绕对齐 每个元素两侧都有间隔
				 */
				
				justify-content: space-around;
			
			}
			ul>li{
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				font-size: 30px;
		 
				
			}
			ul>li:nth-child(1){
				background-color: red;
			}
			
			ul>li:nth-child(2){
				background-color: green;
			}
			
			ul>li:nth-child(3){
				background-color: blue;
			}
			
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		
		
	</body>
</html>